<template>
    <el-form ref="form" :model="fromValue" class="form_list">
        <div class="item" v-for="item in formConfig" :key="item.name">
            <el-form-item :prop="item.name" label="">
                <el-input v-if="item.type === 'input'" :placeholder="item.placeholder" v-model="fromValue[item.name]"></el-input>
                <el-cascader
                    v-if="item.type === 'cascader'"
                    :placeholder="item.placeholder"
                    :options="item.options"
                    :show-all-levels="false"
                    :props="{ checkStrictly: true }"
                    clearable
                    v-model="fromValue[item.name]"
                ></el-cascader>
                <el-date-picker v-if="item.type === 'date'" type="date" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="item.placeholder" v-model="fromValue[item.name]"></el-date-picker>
                <el-select v-if="item.type === 'select'" :placeholder="item.placeholder" v-model="fromValue[item.name]">
                    <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value"></el-option>
                </el-select>
                <el-select v-if="item.type === 'select_id'" :placeholder="item.placeholder" v-model="fromValue[item.name]">
                    <el-option v-for="i in item.options" :key="i.id" :label="i.name" :value="i.id"></el-option>
                </el-select>
            </el-form-item>
        </div>
        <div class="btns">
            <el-button icon="el-icon-search" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
        </div>
        <div class="btns" v-if="isAdd">
            <el-button icon="el-icon-folder-add" @click="addValue">添加</el-button>
        </div>
    </el-form>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        fromValue: {
            type: Array,
            default() {
                return []
            },
        },
        formConfig: {
            type: Array,
            default() {
                return []
            },
        },
        isAdd: {
            type: Boolean,
            default() {
                return false
            },
        },
    },
    methods: {
        search() {
            this.$emit('search', this.fromValue)
        },
        addValue() {
            this.$emit('addValue')
        },
        resetForm() {
            this.$emit('resetForm')
        },
    },
}
</script>

<style lang="less" scoped>
.form_list {

    height: calc(86% - 46px);
    float: left;
    display: flex;
    justify-content: start;
    .item,
    .btns {

        height: 2.5rem !important;
        margin: 0 2%;
    }

    .item {
        .el-input,
        .el-select,
        .el-cascader {
            width: 100%;
        }
    }

    .btns {
        // background-color: red;
        display: flex;
        justify-content: space-between;

        .el-button {
            width: 48%;
            height: 100%;
            background-color: #007bff;
            border-color: #007bff;
            color: white;
            display: flex;
            justify-content: center !important;
            float: left;
        }
    }
}
@media (max-width: 1300px) {
    .form_list{
        width: 55rem;
    }
    .btns{
        width: 10rem !important;
    }

}
@media (min-width: 1301px) {
    .form_list{
        width: 55rem;
    }
    .btns{
        width: 10rem !important;
    }
}
</style>
